<template>
  <div class='signup'>
    <div class="header">
      <div class="header-left" @click="toLogin" style="cursor:pointer">
        <img src="../assets/navtop-b.png" alt="">
      </div>
      <!-- <div class="header-middle">
        <p>
          <span>上海市医药供应链第三方药品追溯平台</span>
          </br>
          <span>Shanghai Medical Supply ChainThird-party Drug Traceability Platform</span>
        </p>
      </div> -->
      <div class="header-right">
        <p>企业入驻</p>
      </div>
    </div>
    <el-row :gutter="20" style="margin:0;background:#f1f1f1">
      <el-col :span="20" :offset="2" class="com-info">
        <div class="grid-content" style="max-width:779px;max-height:600px;overflow:scroll;margin:0 auto;">
          <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="企业注册信息" name="first">
              <el-form :inline="true" :model="base_info" ref="base_info" label-width="110px" :rules="base_info_rules">
                <el-form-item label="企业名称" prop="name">
                  <el-input v-model="base_info.name" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="所在省市区" prop="province" style="width:180px">
                  <!-- <el-input v-model="base_info.location" placeholder="所在省市区"></el-input> -->
                  <el-cascader :options="CityInfo" v-model="base_info.province" :change-on-select="true" :clearable="true" :filterable="true">
                  </el-cascader>
                </el-form-item>
                <br>
                <el-form-item label="直属药监局" prop="drug_admin">
                  <el-input v-model="base_info.drug_admin" placeholder="直属药监局"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人" prop="legal_person">
                  <el-input v-model="base_info.legal_person" placeholder="法定代表人"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="组织机构代码" prop="org_code">
                  <el-input v-model="base_info.org_code" placeholder="组织机构代码"></el-input>
                </el-form-item>
                <el-form-item label="企业邮寄地址" prop="express_address">
                  <el-input v-model="base_info.express_address" placeholder="企业邮寄地址"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="企业注册地址" prop="register_address">
                  <el-input v-model="base_info.register_address" placeholder="企业注册地址"></el-input>
                </el-form-item>
                <el-form-item label="企业类型" prop="type">
                  <el-select style="width:180px" v-model="base_info.type" placeholder="企业类型">
                    <el-option label="生产企业" value="生产企业"></el-option>
                    <el-option label="流通企业" value="流通企业"></el-option>
                    <el-option label="零售企业" value="零售企业"></el-option>
                  </el-select>
                </el-form-item>
                <br>
                <el-form-item label="邮编" prop="zip_code">
                  <el-input v-model="base_info.zip_code" placeholder="邮编"></el-input>
                </el-form-item>
                <el-form-item label="生产范围" prop="production_range">
                  <el-input v-model="base_info.production_range" placeholder="生产范围"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="所属总公司" prop="head_company">
                  <el-input v-model="base_info.head_company" placeholder="所属总公司"></el-input>
                </el-form-item>
                <el-form-item prop="is_legal">
                  <label class="switchLegal-label el-form-item__label" style="width:110px">是否法人机构</label>
                  <div class="switchLegal">
                    <el-switch v-model="base_info.is_legal"></el-switch>
                  </div>
                </el-form-item>
                <br>
                <el-form-item></el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="联系人信息" name="second">
              <el-form :inline="true" ref="contact_info" :model="contact_info" :rules="contact_info_rules" label-width="110px">
                <el-form-item label="指定联系人" prop="linkman">
                  <el-input v-model="contact_info.linkman" placeholder="企业指定联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="tel">
                  <el-input v-model="contact_info.tel" placeholder="联系电话"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="传真" prop="fax">
                  <el-input v-model="contact_info.fax" placeholder="传真"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                  <el-input v-model="contact_info.email" placeholder="电子邮箱"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="手机" prop="mobile">
                  <el-input v-model="contact_info.mobile" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item></el-form-item>
                <!-- <el-form-item label="企业id">
                  <el-input v-model="contact_info.enterprise" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item></el-form-item> -->
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="生产（经营）许可证" name="third">
              <div class="additem-wrap">
                <span @click="addProduct">
                  <img src="../assets/svg/tianjia.svg" class="additem" alt="">
                  <span style="color:#388bc4">添加其他证书</span>
                </span>
              </div>
              <el-collapse v-model="activeNamesProduct">
                <template v-for="(item,index) in product_licenses">
                  <el-collapse-item v-bind:title="'证书'+parseInt(index+1)" v-bind:key="index" v-bind:name="index">
                    <el-form :inline="true" :model="product_licenses[index]" label-width="130px" ref="product_licenses" :rules="product_licences_rules">
                      <el-form-item label="证书编号" prop="code">
                        <el-input v-model="product_licenses[index].code" placeholder="证书编号"></el-input>
                      </el-form-item>
                      <el-form-item label="生产／仓库地址" prop="address">
                        <el-input v-model="product_licenses[index].address" placeholder="生产/仓库地址"></el-input>
                      </el-form-item>
                      <br>
                      <el-form-item label="许可证类型" prop="type">
                        <el-input v-model="product_licenses[index].type" placeholder="许可证类型"></el-input>
                      </el-form-item>
                      <el-form-item label="发证单位" prop="award_org">
                        <el-input v-model="product_licenses[index].award_org" placeholder="发证单位"></el-input>
                      </el-form-item>
                      <br>
                      <el-form-item label="有效期" prop="dateRange">
                        <el-date-picker v-model="product_licenses[index].dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" default-value="2017-11-01"></el-date-picker>
                      </el-form-item>
                      <br>
                      <el-form-item label="生产/经营范围" prop="production_range">
                        <el-input v-model="product_licenses[index].production_range" placeholder="生产/经营范围"></el-input>
                      </el-form-item>
                      <el-form-item></el-form-item>
                    </el-form>
                  </el-collapse-item>
                </template>


              </el-collapse>

            </el-tab-pane>
            <el-tab-pane label="GMP（GSP）证书上传" name="fourth">
              <div class="additem-wrap">
                <span @click="addGsp">
                  <img src="../assets/svg/tianjia.svg" class="additem" alt="">
                  <span style="color:#388bc4">添加其他证书</span>
                </span>

              </div>
              <el-collapse v-model="activeNamesGsp">
                <template v-for="(item,index) in gsp_licenses">
                  <el-collapse-item v-bind:title="'证书'+parseInt(index+1)" v-bind:key="index" v-bind:name="index">
                    <el-form :inline="true" :model="gsp_licenses[index]" ref="gsp_licenses" label-width="120px" :rules="gsp_licences_rules">
                      <el-form-item label="证书编号" prop="code">
                        <el-input v-model="gsp_licenses[index].code" placeholder="证书编号"></el-input>
                      </el-form-item>
                      <el-form-item label="证书类型" prop="type">
                        <el-input v-model="gsp_licenses[index].type" placeholder="证书类型"></el-input>
                      </el-form-item>
                      <br>
                      <el-form-item label="认证范围" prop="range">
                        <el-input v-model="gsp_licenses[index].range" placeholder="认证范围"></el-input>
                      </el-form-item>
                      <el-form-item label="发证单位" prop="award_org">
                        <el-input v-model="gsp_licenses[index].award_org" placeholder="发证单位"></el-input>
                      </el-form-item>
                      <br>
                      <el-form-item label="有效期" prop="dateRange">
                        <el-date-picker v-model="gsp_licenses[index].dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" default-value="2017-11-01"></el-date-picker>
                      </el-form-item>
                      <br>
                      <br>
                      <el-form-item label="上传图片" style="width:100%">
                        <el-upload class="image-upload" action="https://jsonplaceholder.typicode.com/posts/" :http-request="uploadSelFile" :on-preview="uploadPreview"
                          :on-remove="uploadRemove" :file-list="item.imageList" list-type="picture" :limit="1" style="text-align:left;width:500px;">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                      </el-form-item>
                    </el-form>
                  </el-collapse-item>
                </template>
              </el-collapse>

            </el-tab-pane>
            <el-tab-pane label="企业管理员用户注册信息" name="fifth">
              <el-form :inline="true" :model="owner" ref="owner" label-width="110px" :rules="owner_rules">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="owner.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="owner.password" placeholder="密码" type="password"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="owner.email" placeholder="邮箱"></el-input>
                </el-form-item>
                <el-form-item></el-form-item>
                <br>
              </el-form>
            </el-tab-pane>
            <el-button @click="saveForm" class="el-button-primary">保存</el-button>
            <el-button @click="resetForm" class="el-button-primary">重置</el-button>
            <el-button @click="gosign" class="el-button-primary" v-if="activeName =='fifth'">提交</el-button>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogIdVisible" width="30%">
      <span>企业id为{{idReturn}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogIdVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogIdVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import CityInfo from '../../static/js/city-data'
  export default {
    data() {
      return {
        name: 'signup',
        imageUrl: "",
        activeName: 'first',
        activeNamesGsp: ['1'],
        activeNamesProduct: ['1'],
        dialogImageUrl: '',
        dialogVisible: false,
        pickerOptions: {},
        dialogIdVisible: false,
        idReturn: '',
        CityInfo: CityInfo.cityData(),
        // base_info: {
        //   name: '',
        //   province: '',
        //   drug_admin: '',
        //   legal_person: '',
        //   org_code: '',
        //   express_address: '',
        //   register_address: '',
        //   type: '',
        //   zip_code: '',
        //   production_range: '',
        //   head_company: '',
        //   is_legal: false,
        //   enterprise: ''
        // },
        // contact_info: {
        //   enterprise: '',
        //   linkman: '',
        //   tel: '',
        //   fax: '',
        //   email: '',
        //   mobile: ''
        // },
        // product_licenses: [{
        //   code: '',
        //   address: '',
        //   type: '',
        //   award_org: '',
        //   begin_date: '',
        //   end_date: '',
        //   dateRange: '',
        //   production_range: '',
        //   enterprise: '',
        // }],
        // gsp_licenses: [{
        //   enterprise: '',
        //   code: '',
        //   type: '',
        //   range: '',
        //   award_org: '',
        //   dateRange: '',
        //   begin_date: '',
        //   end_date: '',

        // }, ],
        // owner: {
        //   username: '',
        //   password: '',
        //   email: ''
        // },
        //测试用例
        base_info: {
          name: '新东方药业集团',
          province: [1, 1, 18],
          drug_admin: '北京药监局',
          legal_person: '汤姆斯',
          org_code: '0231-231123',
          express_address: '北京市朝阳区',
          register_address: '北京市朝阳区',
          type: '生产企业',
          zip_code: '200940',
          production_range: '医药品',
          head_company: '新东方',
          is_legal: false,
          enterprise: ''
        },
        contact_info: {
          enterprise: '',
          linkman: '汤姆斯',
          tel: '15682829453',
          fax: '213-43-2145',
          email: 'toms@qq.com',
          mobile: '15682829453'
        },
        product_licenses: [{
          code: '9797838213',
          address: '北京市东城区',
          type: '营业执照',
          award_org: '北京市',
          begin_date: '',
          end_date: '',
          dateRange: ['2017-06-23', '2018-06-23'],
          production_range: '医药品',
          enterprise: '',
        }],
        gsp_licenses: [{
          enterprise: '',
          code: '9797838214',
          type: '营业执照',
          range: '医药品',
          award_org: '北京市',
          dateRange: ['2017-06-23', '2018-06-23'],
          begin_date: '',
          end_date: '',
        }, ],
        owner: {
          username: '',
          password: '',
          email: ''
        },
        //验证表单
        base_info_rules: {
          name: [{
            required: true,
            message: '请输入企业名称',
            trigger: 'change'
          }, ],
          province: [{
            type: 'array',
            required: true,
            message: '请输入所在省市区',
            trigger: 'change'
          }],
          drug_admin: [{
            required: true,
            message: '请输入直属药监局',
            trigger: 'change'
          }],
          legal_person: [{
            required: true,
            message: '法定代表人',
            trigger: 'change'
          }],
          org_code: [{
            required: true,
            message: '组织机构代码',
            trigger: 'change'
          }],
          express_address: [{
            required: true,
            message: '企业邮寄地址',
            trigger: 'change'
          }],
          register_address: [{
            required: true,
            message: '企业注册地址',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '企业类型',
            trigger: 'change'
          }],
          zip_code: [{
            required: true,
            message: '邮编',
            trigger: 'change'
          }],
          production_range: [{
            required: true,
            message: '生产范围',
            trigger: 'change'
          }],
          head_company: [{
            required: true,
            message: '所属总公司',
            trigger: 'change'
          }]
        },
        contact_info_rules: {
          linkman: [{
            required: true,
            message: '请输入联系人信息',
            trigger: 'change'
          }, ],
          tel: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'change'
          }],
          fax: [{
            required: true,
            message: '请输入传真',
            trigger: 'change'
          }],
          email: [{
            required: true,
            message: '请输入电子邮箱',
            trigger: 'change'
          }, ],
          mobile: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],
        },
        product_licences_rules: {
          code: [{
            required: true,
            message: '请输入证书编号',
            trigger: 'change'
          }, ],
          address: [{
            required: true,
            message: '请输入生产/仓库地址',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请输入许可证类型',
            trigger: 'change'
          }],
          award_org: [{
            required: true,
            message: '请输入发证单位',
            trigger: 'change'
          }, ],
          // begin_date: [{
          //   required: true,
          //   message: '请输入手机号码',
          //   trigger: 'change'
          // }],
          // end_date: [{
          //   required: true,
          //   message: '请输入手机号码',
          //   trigger: 'change'
          // }],
          dateRange: [{
            type: 'array',
            required: true,
            message: '请输入有效期',
            trigger: 'change'
          }],
          production_range: [{
            required: true,
            message: '请输入产品经营范围',
            trigger: 'change'
          }],
        },
        gsp_licences_rules: {
          code: [{
            required: true,
            message: '请输入证书编号',
            trigger: 'change'
          }, ],
          range: [{
            required: true,
            message: '请输入认证范围',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请输入证书类型',
            trigger: 'change'
          }],
          award_org: [{
            required: true,
            message: '请输入发证单位',
            trigger: 'change'
          }, ],
          // begin_date: [{
          //   required: true,
          //   message: '请输入手机号码',
          //   trigger: 'change'
          // }],
          // end_date: [{
          //   required: true,
          //   message: '请输入手机号码',
          //   trigger: 'change'
          // }],
          dateRange: [{
            type: 'array',
            required: true,
            message: '请输入有效期',
            trigger: 'change'
          }],
          production_range: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],
        },
        owner_rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'change'
          }, ],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'change'
          }],
          email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'change'
          }]
        }
      };
    },
    mounted: function () {
      //获取localstorage
      let localInfo = JSON.parse(localStorage.getItem('signupTemp'))
      console.log(localInfo)
      if (localInfo && localInfo != '') {
        this.base_info = localInfo.base_info,
          this.contact_info = localInfo.contact_info
        this.product_licenses = localInfo.product_licenses
        this.gsp_licenses = localInfo.gsp_licenses
        this.owner = localInfo.owner
      }
      $(window).bind('beforeunload', function () {
        return '您可能有数据没有保存';
      });
    },
    methods: {
      toLogin() {
        this.$router.push({
          path: '/login'
        });
      },
      gosign() {
        const that = this;
        this.$refs['base_info'].validate((valid) => {
          if (valid) {
            this.$refs['contact_info'].validate((valid) => {
              if (valid) {
                this.$refs['product_licenses'][0].validate((valid) => {
                  if (valid) {
                    this.$refs['gsp_licenses'][0].validate((valid) => {
                      if (valid) {
                        this.$refs['owner'].validate((valid) => {
                          if (valid) {
                            //时间格式转换
                            for (let i = 0; i < this.product_licenses.length; i++) {
                              this.product_licenses[i]['begin_date'] = this.product_licenses[i].dateRange[
                                0]

                              this.product_licenses[i]['end_date'] = this.product_licenses[i].dateRange[
                                1]
                            }
                            for (let i = 0; i < this.gsp_licenses.length; i++) {
                              this.gsp_licenses[i]['begin_date'] = this.gsp_licenses[i].dateRange[0]

                              this.gsp_licenses[i]['end_date'] = this.gsp_licenses[i].dateRange[1]
                            }
                            this.$http({
                              url: './enterprise/',
                              data: {
                                'base_info': this.base_info,
                                'contact_info': this.contact_info,
                                'product_licenses': this.product_licenses,
                                'gsp_licenses': this.gsp_licenses,
                                'owner': this.owner
                              },
                              method: 'post'
                            }).then(
                              response => {
                                //success
                                console.log(response)
                                localStorage.removeItem('signupTemp')
                                that.$message({
                                  message: '入驻成功',
                                  type: 'success'
                                })
                                that.idReturn = response.data.id
                                that.dialogIdVisible = true
                              }).catch(error => {
                              var errorMessage = ''
                              if (error.response.data['product_licenses']) {
                                errorMessage = error.response.data['product_licenses'][0][
                                  'code'
                                ][0]
                                that.$message({
                                  message: errorMessage,
                                  type: 'error'
                                })
                              } else if (error.response.data['gsp_licenses']) {
                                errorMessage = error.response.data['gsp_licenses'][0][
                                  'code'
                                ][0]
                                that.$message({
                                  message: errorMessage,
                                  type: 'error'
                                })
                              } else {
                                that.$message({
                                  message: '入驻失败',
                                  type: 'error'
                                })
                              }


                            })
                          } else {
                            that.$message({
                              type: 'error',
                              message: '企业管理员信息不完整'
                            })
                            console.log('error submit!!');
                            return false;
                          }
                        });
                      } else {
                        that.$message({
                          type: 'error',
                          message: 'GMP（GSP）证书不完整'
                        })
                        console.log('error submit!!');
                        return false;
                      }
                    });
                  } else {
                    that.$message({
                      type: 'error',
                      message: '生产（经营）许可证不完整'
                    })
                    console.log('error submit!!');
                    return false;
                  }
                });
              } else {
                that.$message({
                  type: 'error',
                  message: '联系人信息不完整'
                })
                console.log('error submit!!');
                return false;
              }
            });
          } else {
            that.$message({
              type: 'error',
              message: '企业注册信息信息不完整'
            })
            console.log('error submit!!');
            return false;
          }
        });
      },
      saveForm() {
        let signupTemp = {
          base_info: this.base_info,
          contact_info: this.contact_info,
          gsp_licenses: this.gsp_licenses,
          product_licenses: this.product_licenses,
          owner: this.owner
        }
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        console.log(JSON.parse(JSON.stringify(signupTemp)))
        localStorage.setItem('signupTemp', JSON.stringify(signupTemp))
      },
      resetForm() {
        this.base_info = {},
          this.contact_info = {}
        this.product_licenses = []
        this.gsp_licenses = []
        this.owner = {}
        this.$refs['base_info'].resetFields();
        this.$refs['contact_info'].resetFields();
        this.$refs['product_licenses'].resetFields();
        this.$refs['gsp_licenses'].resetFields();
        this.$refs['owner'].resetFields();
        localStorage.removeItem('signupTemp')
      },
      addProduct() {
        this.product_licenses.push({})
      },
      addGsp() {
        this.gsp_licenses.push({})
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadSelFile(param) {
        let formData = new FormData()
        formData.append('image', param.file)
        this.$http({
          method: 'post',
          url: param.action,
          data: formData
        }).then(response => {


        }).catch(error => {
          param.onSuccess(response)
          console.log(error)
          if (error.response) {

            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            param.onError('配时文件上传失败(' + error.response.status + ')，' + error.response.data.detail);
          } else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            param.onError('配时文件上传失败，服务器端无响应');
          } else {
            // Something happened in setting up the request that triggered an Error
            param.onError('配时文件上传失败，请求封装失败');
          }
        })

      },
      uploadPreview(file) {
        console.log(file);
      },
      uploadRemove(file, imageList) {
        console.log(file, imageList);
      },
    }
  };

</script>
<style scoped>
  .signup {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
  }

  .header {
    height: 60px;
    text-align: left;
    padding: 10px 30px;
    background: white;
    box-shadow: 0px 5px 5px #e0e5ef
  }

  .header-left {
    width: 440px;
    height: auto;
    float: left;
    margin-right: 20px;
  }

  .header-left img {
    width: 100%;
  }

  .header-middle {
    padding: 3px 10px 0 0;
    float: left;
    height: 60px;
    width: auto;
    color: #3791ff;
    font-weight: bold;
  }

  .header-right {
    margin-top: 8px;
    padding-left: 10px;
    float: left;
    height: 46px;
    width: auto;
    font-size: 23px;
    color: #50535b;
    font-weight: bold;
    line-height: 46px;
    border-left: 2px solid #d4d8e1;
  }

  .header-middle>p>span:first-child {
    font-size: 23px;
  }

  .header-middle>p>span:last-child {
    font-size: 10px;
  }

  .com-info {
    border-radius: 5px;
    margin-top: 50px;
  }

  .el-form-item {
    min-width: 310px;
  }

  .el-input>>>input {
    width: 180px;
  }

  .el-switch__core {
    width: 180px;
  }

  .switchLegal {
    display: inline-block;
    width: 180px;
    text-align: left
  }

  .el-date-editor {
    width: 500px !important;
  }

  .el-collapse {
    margin-bottom: 20px;
  }

  .el-collapse .el-form {
    border: 1px solid #f3f6fa;
    padding-top: 10px;
  }

  .el-collapse>>>.el-collapse-item__header {
    background: #f3f6fa;
    text-align: left !important;
    padding-left: 20px;
  }

  .el-collapse>>>.el-collapse-item__content {
    padding-bottom: 0;
  }

  .additem-wrap {
    text-align: right;
    margin: 15px 20px;
  }

  .additem-wrap>span {
    cursor: pointer;
  }

  .additem {
    width: 30px;
    vertical-align: middle;
  }

  .upload-gmp {
    display: inline-block;
    width: 180px;
    height: 180px;
    border: 1px solid #f3f6fa;
  }

  .btn-upload {
    position: absolute;
    display: inline-block;
    width: 182px;
    height: 182px;
    left: 0;
    opacity: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .signup>>>.is-active {
    background: #378bc4 !important;
    color: white !important;
  }

</style>
